<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 1.元素选择符 */
			/* body {
				font-size: 13pt;
			}

			div {
				border: 3px double #f00;
				width: 300px;
			} */

			/* 2.class类选择符  */
			.blue {
				color: blue;
			}

			p {
				border: 2px dashed #f00;
				width: 280px;
			}

			/* 3.id选择符 */
			#top {
				line-height: 20px;
				margin: 15px 0px 0px 0px;
				font-size: 24px;
				color: #f00;
			}
		</style>
	</head>
	<body>
		<!-- 1.元素选择符 -->

		<div>第一个div元素显示宽度为300像素</div>
		<div>第二个div元素显示宽度也为300像素</div>


		<!-- 2.class类选择符 -->

		<h3 class="blue">标题可以应用该样式，文字为蓝色</h3>
		<p class="blue">段落也可以应用该样式，文字为蓝色</p>

		<!-- 3.id选择符 -->

		<div>id选择符以&ldquo；#&rdquo；开头（此div不带id）</div>
		<div id="top">id选择符以&ldquo；#&rdquo；开头（此div带id）</div>
	</body>
</html>